<!-- Created by henian.xu on 2018/11/8. -->

<template>
    <div class="page-header">
        <div class="container">
            <div class="col-6">
                <linker
                    to="/"
                    ssr
                    tag="div"
                    class="header-logo">
                    <img
                        :src="info.sy_wzlogo.image"
                        alt="logo">
                    <div class="inner">
                        <span class="label">{{ info.sy_wzmc }}</span>
                        <span class="desc">{{ info.sy_ptmc }}</span>
                    </div>
                </linker>
            </div>
            <div class="col-12">
                <ul class="header-menu">
                    <Linker
                        tag="li"
                        ssr
                        to="/">
                        <div class="label">首页</div>
                    </Linker>
                    <Linker
                        tag="li"
                        ssr
                        to="/special/supplier">
                        <div class="label">供应商入驻</div>
                    </Linker>
                    <linker
                        tag="li"
                        ssr
                        to="/special/distributor">
                        <div class="label">分销商入驻</div>
                    </linker>
                    <li>
                        <div class="label">关于我们</div>
                    </li>
                </ul>
            </div>
            <div class="col-6"><SearchBox/></div>
        </div>
    </div>
</template>

<script>
import SearchBox from './searchBox';
export default {
    name: 'Header',
    components: { SearchBox },
    data() {
        return {
            info: {
                // 首页_网站名称
                sy_wzmc: '',
                // 首页_平台名称
                sy_ptmc: '',
                // 首页_网站LOGO
                sy_wzlogo: '',
            },
            infoKey: 'sy_wzmc,sy_ptmc,sy_wzlogo',
        };
    },
    methods: {
        async getPortalInfoValue() {
            await this.$axios
                .get('/rpc/comm/pt/portalInfoConfig/getPortalInfoValue', {
                    keys: this.infoKey,
                })
                .then(json => {
                    const result = json.data.data;
                    this.info.sy_wzmc = result.sy_wzmc.text;
                    this.info.sy_ptmc = result.sy_ptmc.text;
                    this.info.sy_wzlogo = result.sy_wzlogo.data[0];
                    console.log(this.info.sy_wzlogo);
                });
        },
    },
    mounted() {
        this.getPortalInfoValue();
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.page-header {
    position: relative;
    z-index: $z-index-3;
    background-color: #fff;
    height: 60px;

    .header-logo {
        cursor: pointer;
        @include clearfix();
        margin-top: (60px - 32)/2;

        > img {
            float: left;
            width: 32px;
            height: 32px;
        }
        > .inner {
            line-height: 32px;
            > .label {
                padding: 0 $padding-small;
                line-height: 1;
                color: $color-main;
                font-size: 18px;
            }
            > .desc {
                padding: 2px $padding-small;
                border-left: 1px solid $color-border;
                line-height: 1;
                color: $gray6;
            }
        }
    }

    .header-menu {
        list-style: none;
        line-height: 60px;
        @include clearfix;

        > li {
            cursor: pointer;
            float: left;
            > .label {
                display: inline-block;
                padding: 0 $padding-big * 2;
            }
            &.exact-active {
                color: $color-main;
            }
        }
    }
}
</style>
